<template>
    <div class="import-container">
            <el-tag>
                <i class="el-icon-download" />
                <a :href="'/attendance/daily/import'">点击下载模版</a>
            </el-tag>
        <div class="import-panel">
            <el-upload
                ref="upload"
                drag
                :on-success="fileUploadSuccess"
                :on-error="fileUploadError"
                :action="BASE_API+'/Attendance/readExcel'"
                :auto-upload="false"
                :on-change="handleUploadChange"
                :file-list="fileList"
                :before-upload="beforeUpload"
                >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text"><el-button slot="trigger" size="small" type="primary">选取文件</el-button></div>
            <div class="el-upload__tip" slot="tip">请根据模板上传文件，只能上传xls/xlsx文件，且不超过1M</div>
            </el-upload>
            <el-button :loading="loading" class="uploadbtn" size="small" type="success" @click="submitUpload">确认上传</el-button>
        </div>
        <div class="table-panel">
            <div class="import-tag">文件内容（20条）识别（8条）未识别（12条）</div>
            <el-table
                ref="filterTable"
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                >
            <el-table-column
                prop="id"
                label="序号"
                align="center"
                >
            </el-table-column>
            <el-table-column
                :filters="corporationfilter"
                :filter-method="filterHandler"
                prop="corporation"
                label="劳务公司名称"
                min-width="120px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                :filters="groupfilter"
                :filter-method="filterHandler"
                prop="groupId"
                label="班组名称"
                min-width="90px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                align="center"
                >
            </el-table-column>
            <el-table-column
                :filters="datefilter"
                :filter-method="filterHandler"
                prop="date"
                label="日期"
                min-width="90px"
                align="center"
                sortable
                >
            </el-table-column>
            <el-table-column
                prop="startTime"
                label="开始时间"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="endTime"
                label="结束时间"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="total"
                label="合计"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="operation"
                label="操作"
                align="center"
                min-width="90px"
                fixed="right"
                >
                <template slot-scope="scope">
                    <el-button type="text" size="small">调整</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-row class="page">
                <div class="page-tag">
                    共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
                </div>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            BASE_API: process.env.BASE_API, // 接口API地址
            fileList:[],
            corporationfilter:[
                {text:'劳务公司1',value:'劳务公司1'},
                {text:'劳务公司2',value:'劳务公司2'},
            ],
            groupfilter:[
                {text:'班组1',value:'班组1'},
                {text:'班组2',value:'班组2'},
            ],
            datefilter:[
                {text:'2021-07-07',value:'2021-07-07'},
                {text:'2021-07-08',value:'2021-07-08'},
            ],
            tableData:[{
                id:1,
                corporation:'劳务公司1',
                groupId:'班组1',
                name:'张三',
                date:'2021-07-07',
                startTime:'8:00',
                endTime:'18:00',
                total:'8小时'
            },
            {
                id:2,
                corporation:'劳务公司2',
                groupId:'班组1',
                name:'张三',
                date:'2021-07-08',
                startTime:'8:00',
                endTime:'18:00',
                total:'8小时'
            },
            ],
            loading:false,
            currentPage:1,             //当前页码
            pageSize:10,    //每页显示条目个数
            total:0
        }
    },
    methods:{
        submitUpload(){
            this.importBtnDisabled = true;
            this.loading = true;
            this.$refs.upload.submit();
        },
        beforeUpload(file){
            const fileType = file.name.substring(file.name.lastIndexOf('.'))
            if (fileType.toLowerCase() != '.xls' && fileType.toLowerCase() != '.xlsx') {
                this.$message.error('文件必须为.xls或.xlsx类型')
                this.fileList = []
                this.loading=false
                return false
            }
        },
        
         // 限制文件上传的个数只有一个，获取上传列表的最后一个
        handleUploadChange(file, fileList) {
            if (fileList.length > 0) {
                this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的文件
            }
        },
        handleClick(row) {
            console.log(row);
        },

        fileUploadSuccess(response) {
            console.log(response);
            this.loading = false;
        //     if (response.success === true) {
        //         this.loading = false;
        //         this.$message({
        //         type: "success",
        //         message: "添加课程分类成功"
        //         });
        //                 //回到列表页面，路由跳转
        //         this.$router.push({ path: "/subject/list" });
        //     }
            },
        fileUploadError(response) {
            console.log(response);
            this.loading = false;
        //     this.$message({
        //         type: "error",
        //         message: "添加课程分类失败"
        //     });
            },

        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        }
        
    }
}
</script>

<style scoped lang="scss">
</style>